@import url('../../styles/variable');

.my-page-layout {

  .page_list {
    width: 100%;

    .page_list_item {
      width: calc((100% - 10px) / 4); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      min-width: calc((100% - 10px) / 4); // 加入这两个后每个item的宽度就生效了
      max-width: calc((100% - 10px) / 4); // 加入这两个后每个item的宽度就生效了
      &:nth-child(4n) { // 去除第3n个的margin-right
        margin-right: 0;
      }

      .my-list_content {
        .my-list-body-img {
          height: 200px;
          .my-list-body-edit {
            background: rgba(0, 0, 0, .9);
            opacity: 0;
            z-index: -9;
            transition: opacity .2s;

            .btn_edit {
              min-width: 160px;
            }

            .btn_edit_icon {
              padding: 12px 8px;

              & > i {
                cursor: pointer;
                font-size: 16px;
                display: inline-block;
                width: 40px;
                height: 20px;
                text-align: center;

                &:hover {
                  color: var(--el-color-primary);
                }
              }
            }

            .my-list-body-edit-icon {
              right: 10px;
              top: 10px;

              & > i {
                padding: 0 6px;
                font-weight: 400;

                &:hover {
                  color: var(--el-color-primary);
                }
              }
            }
          }
          &:hover {
            .my-list-body-edit {
              opacity: 1 !important;
              z-index: 2;
            }
          }
        }
      }

      .my-list-footer {
        background-color: @base-border-color;
        height: 32px;
        line-height: 32px;

        .dotted {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin: 0 6px;
        }

        .publish {
          background-color: var(--el-color-primary);
        }

        .no-publish {
          background-color: var(--el-color-info);
        }
      }
    }
  }
}